import React, { useEffect } from 'react';
import './App.css';
import MachineRoom from './components/MachineRoom';
// 机房对象
let room: MachineRoom;
let canvas : HTMLCanvasElement;
function App() {
  // 建立canvas画布，并且通过ref 获取其HTMLCanvasElement对象
  useEffect(()=>{
    if(!canvas){return}
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    room = new MachineRoom(canvas);
    room.loadGLTF('machineRoom.gltf')
    room.animate()
  })
  // 鼠标移动事件
  const MouseMove =(e:any)=>{
    let clientX:number = e.clientX
    let clientY:number = e.clientY
    room.selectCabinet(clientX,clientY)
  }
  return (
    <div className="App" onMouseMove={MouseMove}>
      <canvas id='canvas' ref={(ele:HTMLCanvasElement)=>(canvas  = ele)}></canvas>
    </div>
  );
}

export default App;
